Estoy tratando de escribir un componente de enrutador para mi aplicación de reacción. Estoy creando una nueva clase de reacción y definiendo algunas rutas en el método componentDidMount. Este es el método completo
componentDidMount: function () { var me = this; router.get('/', function(req){ me.setState({ component: <MainPage /> }); }); router.get('/realty', function(req){ me.setState({ component: <RealtyPage /> }); }); router.get('/realty/:id', function(req){ me.setState({ component: <RealtyPage id={req.params.id} /> }); }); },Cuando voy a '/' o '/realty' todo funciona. Pero, cuando voy a 'realty/new', aparece el error Uncaught SyntaxError: Unexpected token < in app.js:1. Pero el depurador de Chrome muestra ese error en mi index.html e incluso no puedo depurarlo en el navegador. Este error ocurre cada vez que voy a la ruta con '/'. Estoy tratando de usar otros enrutadores del lado del cliente, como page.js, rlite, grapnel, pero todos siguen igual. Tal vez alguien tiene alguna idea acerca de este error?
UPD: este es el código completo del componente del enrutador. Ahora usa page.js para el enrutamiento y veo el mismo error
var React = require('react'); var page = require('page'); var MainPage = require('../components/MainPage'); var RealtyPage = require('../components/RealtyPage'); var Router = React.createClass({ getInitialState: function(){ return { component: <RealtyPage /> } }, componentDidMount: function () { var me = this; page('/', function (ctx) { me.setState({ component: <MainPage /> }); }); page('/realty', function (ctx) { me.setState({ component: <RealtyPage /> }); }); page.start(); }, render: function(){ return this.state.component } }); module.exports = Router;El error de "token inesperado" puede aparecer por varias razones diferentes. Me encontré con un problema similar y, en mi caso, el problema era que la etiqueta del script para cargar el paquete generado en el html era así:
<script src="scripts/app.js"></script>Al navegar a una ruta con un parámetro (lo mismo sucederá con una ruta anidada o una ruta con más de un segmento), el navegador intentará cargar el script usando la URL incorrecta. En mi caso, la ruta de la ruta era ' usuario /:id', y el navegador hizo una solicitud a ' http://127.0.0.1:3000/usuario/scripts/app.js ' en lugar de ' http://127.0.0.1 :3000/scripts/app.js '. La solución fue fácil, cambie la etiqueta del script a esto:
<script src="/scripts/app.js"></script>Si alguien más tiene este problema, consulte la pestaña de red de su devtools para ver las respuestas del servidor. El motivo detrás del mensaje de error es que está intentando cargar un archivo javascript/json y se devolvió un archivo html (posiblemente un mensaje de error).
Los archivos HTML comienzan así normalmente:
<!doctype html> <html> ...El navegador ve el primer < y se confunde porque este JavaScript no es válido, por lo que imprime el mensaje de error:
SyntaxError: Unexpected token <Entonces, en el caso anterior, cuando el OP solicitó un nombre de archivo incorrecto, obtuvo una página de error (en HTML) que condujo a ese error.
Espero que ayude a alguien más :)
También tuve el mismo error al usar las propiedades de React-Router después de agregar "/:uid" para editar la ruta relativa en mi código:
<Route path="/edit/:uid" component={EditPage}/>El problema se produjo en mi index.html, donde cargo mi referencia principal a mi paquete de archivos javascript compilado.js.
Cambié:
<script src="./bundle.js"></script>para
<script src="/bundle.js"></script>Y de inmediato resolvió el problema.